<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="70px">
      <el-form-item label="部门" prop="departmentId">
        <el-select v-model="ruleForm.departmentId" @change="getQingjia">
          <el-option
            v-for="item in deptsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <p>假期类型</p>
    <el-table :data="tableList" style="width: 100%">
      <el-table-column prop="leaveType" label="类型" :formatter="formatLeaveType" />
      <el-table-column label="是否可用">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.isEnable"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-row type="flex" justify="center" style="margin: 15px 0">
      <el-button type="primary" @click="btnOk">保存更新</el-button>
      <el-button @click="btnCancel">取消</el-button>
    </el-row>
    <el-alert type="warning" show-icon :closable="false" title>
      <template>
        <div class="tipInfo">
          <p>事假 请假单位为0.5天 只能提交工作日内的请假单</p>
          <p>当请假开关关闭后，员工则不可在员工端提交请假申请</p>
        </div>
      </template>
    </el-alert>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { getQingjia, gettingQingjia } from '@/api/attendance'
import attendanceEnum from '@/api/constant/attendance'
export default {
  data() {
    return {
      ruleForm: {
        departmentId: '1175310929766055936'
      },
      deptsList: [],
      tableList: [],
      rules: {
        departmentId: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getDepartments()
    this.getQingjia('1175310929766055936')
  },
  methods: {
    formatLeaveType(row, column, cellValue) {
      return attendanceEnum.type.find(item => cellValue === item.leaveType).name
    },
    async btnOk() {
      this.tableList.forEach(item => {
        console.log(item.isEnable, typeof item.isEnable)
        if (item.isEnable) {
          item.isEnable = 0
        } else {
          item.isEnable = 1
        }
      })
      await gettingQingjia(this.tableList)
      this.$message.success('操作成功')
      this.btnCancel()
    },
    btnCancel() {
      this.ruleForm.departmentId = '1175310929766055936'
      this.getQingjia('1175310929766055936')
      this.$emit('updateShowDialog')
    },
    async getQingjia(val) {
      const fd = new FormData()
      fd.append('departmentId', val)
      const res = await getQingjia(fd)
      if (res.length === 0) {
        this.tableList.length = 0
        attendanceEnum.type.map(item => {
          this.tableList.push({ leaveType: item.leaveType, isEnable: 1, departmentId: val })
        })
        console.log(this.tableList)
      } else {
        this.tableList = res
      }
      this.tableList.forEach(item => {
        if (item.isEnable === 0) {
          item.isEnable = true
        } else {
          item.isEnable = false
        }
      })

      console.log(res)
    },
    async getDepartments() {
      const { depts } = await getDepartments()
      console.log(depts)
      this.deptsList = depts
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep label {
  font-weight: 400;
}
// .tipInfo {
//   p {
//     padding: 5px 0;
//   }
// }
</style>
